 <template>
     <el-row class="image-list-box" v-infinite-scroll="load">
         <el-col :span="8" v-for="(image, idx) in imageList" :key="idx">
             <el-card :body-style="{ padding: '0px' }">
                 <div class="image-box">
                     <el-image :src="image.url" class="image"></el-image>
                     <div class="image-content">
                         <div class="image-desc">{{image.desc}}</div>
                         <div class="image-info">
                             <span v-if="image.date">
                                 <i class="fa fa-calendar"></i> {{image.date}}&nbsp;&nbsp;
                             </span>
                             <span v-if="image.hot">
                                 <i class="fa fa-eye"></i> {{image.hot}}
                             </span>
                         </div>
                         <div class="image-option" style="float: right;">
                             <el-tooltip effect="dark" content="壁纸下载中" placement="top" v-if="isDownloading">
                                <i class="fa fa-circle-o-notch fa-spin"></i>
                             </el-tooltip>
                             <el-tooltip effect="dark" content="下载壁纸" placement="top" v-if="!isDownloading">
                                 <i class="fa fa-download" @click.stop.prevent="downloadImage(image.url)"></i>
                             </el-tooltip>
                             <el-tooltip effect="dark" content="设置壁纸" placement="top" v-if="!isDownloading">
                                 <i class="fa fa-desktop" @click.stop.prevent="setWallpaper(image.url)" v-if="!isDownloading"></i>
                             </el-tooltip>
                         </div>
                     </div>
                 </div>
             </el-card>
         </el-col>
         <el-col v-if="isLoading" :md="24" class="no-more">拼命加载中。。。</el-col>
         <el-col v-if="isNoMore" :md="24" class="no-more">没有了图了，别拉了==！</el-col>
     </el-row>
 </template>

<script>
    import Config from '../../utils/config.js';
    import Wallpaper from '../../utils/wallpaper.js';
    import { ipcRenderer } from 'electron'
    export default {
        name: "image-list",
        props: {
            currentCid: {
                type: [String, Number],
                default: '',
                required: true
            }
        },
        data () {
            return {
                currentPageNo : 1,
                dataSource : {},
                imageList: [],
                isNoMore: false,
                isLoading: false,
                isDownloading: false,
            };
        },
        mounted() {
            this.dataSource = this.dataSourceFactory.getDataSource();
            this.currentPageNo = 1;
            this.imageList = [];
            this.loadImageList();
            this.ipc();
        },
        methods: {
            load() {
                if (this.isLoading || this.isNoMore) {
                    return false;
                }
                this.isLoading = true;
                setTimeout(async () => {
                    this.currentPageNo += 1;
                    console.log('load page:', this.currentPageNo);
                    await this.loadImageList();
                    this.isLoading = false
                }, 500);
            },
            async loadImageList() {
                try {
                    let imageList = await this.dataSource.getList(this.currentPageNo, this.currentCid);
                    if (imageList.length <= 0) {
                        this.isNoMore = true;
                        return false;
                    }
                    this.imageList = this.imageList.concat(imageList);
                } catch (e) {
                    console.error(e);
                }
            },
            async changeDataSource() {
                this.dataSource = this.dataSourceFactory.getDataSource();
                this.currentPageNo = 1;
                this.imageList = [];
                await this.loadImageList();
            },
            async downloadImage(url) {
                let imageInfo = await this.downloadImageByUrl(url);
                if (imageInfo.localPath) {
                    let option = {
                        title: "爱换壁纸",
                        body: "壁纸下载好了。",
                    };
                    let notify = new window.Notification(option.title, option);
                    notify.onclick = () => {
                        notify.close();
                    }
                }
            },
            async downloadImageByUrl(url) {
                this.isDownloading = true;
                let Conf = new Config();
                let currentPlatform = this.dataSourceFactory.getCurrentPlatform();
                let referer = {};
                let downloadPath = Conf.getDownloadPath();
                let callback = (receivedBytes, totalBytes, localPath) => {
                    //console.log(receivedBytes, totalBytes);
                    //TODO 进度条
                };
                if (currentPlatform === this.dataSourceFactory.wpBing) {
                    referer['referer'] = 'https://bing.ioliu.cn/';
                }
                if (currentPlatform === this.dataSourceFactory.wp360) {
                    referer['referer'] = 'http://front.birdpaper.com.cn/';
                }
                let image =  await (new Wallpaper()).download(url, downloadPath, referer, callback);
                this.isDownloading = false;
                return image;
            },
            async setWallpaper(url) {
                let imageInfo = await this.downloadImageByUrl(url);
                ipcRenderer.send('set-wallpaper', imageInfo);
            },
            ipc () {
                ipcRenderer.on('set-wallpaper-reply', (event, arg) => {
                    console.log(arg);
                    let option = {
                        title: "爱换壁纸",
                        body: "更换壁纸失败了。",
                    };
                    if (arg.result === 'success') {
                        option = {
                            title: "爱换壁纸",
                            body: "壁纸已经帮你好啦。",
                        };
                    }
                    let notify = new window.Notification(option.title, option);
                    notify.onclick = () => {
                        notify.close();
                    }
                });
            }
        },
        watch: {
            currentCid: async function(newVal, oldVal) {
                console.log('change cid: ', newVal);
                this.currentPageNo = 1;
                this.isNoMore = false;
                this.isLoading = false;
                this.imageList = [];
                await this.loadImageList();
            }
        },
    }
</script>

<style scoped>
    .image-list-box {
        height: 91.5vh;
        overflow: auto;
    }
    .image-box {
        padding-bottom: 56%;
        width: 100%;
        position: relative;
    }
    .image-box .image {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    .image-box .image-content{
        width: 100%;
        height: 60px;
        position: absolute;
        left: 0;
        bottom: 0;
        text-align: left;
        background-color: rgba(0, 0, 0, 0.53);
        color: aliceblue;
        font-size: 12px;
        display: none;
    }
    .image-box:hover .image-content {
        display: block;
    }
    .image-box .image-desc {
        padding: 5px;
        display: -webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        height: 28px;
    }
    .image-box .image-info {
        padding: 5px;
        display: inline;
    }
    .image-box .image-option {
        display: inline;
        margin-right: 10px;
    }
    .image-box .image-option i {
        cursor: pointer;
        margin-right: 10px;
    }
    .no-more {
        font-size: 18px;
        padding: 10px;
        margin-top: 10px;
    }
</style>
